import React, {} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Platform
} from 'react-native';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import BaseItem from '../common/BaseItem';
import CommonStyles from '../../common/CommonStyles';

const IMAGE_SOURCE = [{source:{uri:""}, width:0, height:0},
  {source:require("../../../resource/images/activity/live.png"), width:18, height:17},
  {source:require("../../../resource/images/activity/over.png"), width:13, height:14},
  {source:{uri:""}, width:0, height:0},
  ];
  //0未开始 1进行中 2已结束 3报名中
const STATE_LABELS = ["敬请期待", "进行中", "已结束", "报名中"];
const STATE_COLORS = ["#000000", "#db3132", "#999999", "#db3132"];

const ITEM_HEIGHT = 200;

export default class ActivityListItemView extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  _onPressItem() {
    this.gotoPage(Config.pages.activity_content, this.props.data);
  }

  render() {
      const keyWord=this.props.keyWord;
      const strat = this.props.data.title.indexOf(keyWord);
      const str1 = this.props.data.title.substr(0,strat);
      const str2 = this.props.data.title.substr(strat,keyWord&&keyWord.length||0);
      const str3 = this.props.data.title.slice(strat+(keyWord&&keyWord.length||0));
    return (
      <TouchableOpacity onPress={this._onPressItem.bind(this)}
        style={{flex:1, flexDirection:"row",
            paddingTop:SizeUtils.translateDesignHeightToCode(30),
            paddingBottom:SizeUtils.translateDesignHeightToCode(30),
            paddingLeft:SizeUtils.translateDesignWidthToCode(20),
            borderBottomColor:'#e3e3e3',
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
            paddingRight:SizeUtils.translateDesignWidthToCode(20)}}>
          <View style={{ height:SizeUtils.translateDesignHeightToCode(Platform.OS !== 'android'?150:180),borderRadius:2,overflow:'hidden',}}>
            <TImage source={this._getImageSource(this.props.data)}
            style={{width: (750-50)/3, height:Platform.OS !== 'android'?150:180 }} isMini={true}/>
          </View>
          <View style={{flex:1, flexDirection: "column", paddingTop:SizeUtils.translateDesignHeightToCode(0),
                left:SizeUtils.translateDesignWidthToCode(20)}}>
              <View>
                {
                  keyWord?
                  <Text numberOfLines={1}
                  style={[CommonStyles.primaryText, {marginRight:SizeUtils.translateDesignHeightToCode(10),marginTop:SizeUtils.translateDesignHeightToCode(0),fontWeight:'bold',fontSize:SizeUtils.translateFontSizeToCode(30)}]}>
                    {str1}<Text style={{color:'red',fontSize:SizeUtils.translateFontSizeToCode(30),fontWeight:'bold'}}>{str2}</Text>{str3}
                  </Text>:
                  <Text numberOfLines={1}
                  style={[CommonStyles.primaryText, {marginTop:SizeUtils.translateDesignHeightToCode(0),fontWeight:'bold',fontSize:SizeUtils.translateFontSizeToCode(30)}]}>
                    {this.props.data.title}
                </Text>
                }
                <Text
                  style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(24),
                      color:'#888888',
                      paddingTop:SizeUtils.translateDesignHeightToCode(14)}]}>
                    {this.props.data.title ? "开始时间: " + this._getTimeStr(this.props.data.begin_at) : ""}
                </Text>
                <Text
                  style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(24),
                      color:'#888888',
                      paddingTop:SizeUtils.translateDesignHeightToCode(8)}]}>
                    {this.props.data.title ? "结束时间: " + this._getTimeStr(this.props.data.end_at) : ""}
                </Text>
              </View>
              <View style={{alignItems:"center",
                  justifyContent: 'center',
                  width:44,
                  borderRadius:20,
                  borderWidth:SizeUtils.translateDesignNumToCode(3),
                  borderColor:'#db3132',
                  marginTop:SizeUtils.translateDesignHeightToCode(10)}}>
                <Text
                  style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(18),
                    backgroundColor:'#0000',
                    color:'#db3132',paddingLeft:5,paddingRight:5,paddingTop:2,paddingBottom:2}]}>
                    {this.props.data.manner===1?'团体赛':'个人赛'}
                </Text>
              </View>
          </View>
      </TouchableOpacity>
    )
  }

  _getImageSource(data) {
    // console.log("_getImageSource", data.image_url);
    if(data.image_url) {
      return {uri: data.image_url};
    }
    else {
      return {uri: ""};
    }
  }

  _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity1(time)
    return timeStr;
  }
}
